Navigation Bar Elements
Click on image above to display larger
A Navigation Bar (or Navbar for short) provides a way for users to navigate through your form whilst at the same time indicating progress through the pages making up the form.
There are a number of different designs of Navigation Bar available from the Elements gallery, but all follow the same principles. An example of one of the designs is shown above.
The bars display the pages of your form in a horizontal line in the order in which they appear in the Pages tab of the Project Explorer, with the first page on the left and the last page on the right. A user can move to any page in the sequence by clicking or tapping on the appropriate page in the bar and the bar visually indicates the current page. The bar also updates automatically if the user moves through the form using another method of navigation, such as Navigation Buttons.
Each section of a Navbar is identified using the appropriate page's Title property, if one has been specified in the Page's properties, otherwise it will use the page's Name property. We recommend you change the default values for these properties to make the Navbar meaningful to your users.
At runtime, if the form is displayed on a screen or in a browser window below 768 pixels in width, a Navbar will transform into a hamburger menu:
Clicking on the 'hamburger', 
, will display the pages in a menu:
allowing a user to see which page in the sequence they are currently on and allowing them to move to a different page if they want to.
Customise a Navigation Bar
By default, the Arrows Navbar is supplied in three colour options - grey, blue and green. Boxes and Pills Navbars are supplied in two colour options - grey and blue. You can select one of these colours within the properties for the Navbar (see below). Alternatively, if you want to display a Navbar in a different colour, the simplest method is to change the colour of one of these three Navbars using a graphics package to recolour the images used to make up the bars.
- The images used to make up the Navbars are supplied as '.png' files and include transparent backgrounds. The package you use to change the colour must maintain the transparency in the original images.
The images can be found in the project's Elements folder for your form. By default the Elements folder will be:
c:\Users\<username>\Documents\NDL Software\Form Studio\Projects\<project name>\Elements
Easy access to the Elements folder is available by clicking the Elements button in the Resources group on the Ribbon's Developer tab, which will load the Windows File Explorer and automatically display the contents of this folder.
Decide which of the three Navbars you want to use and look for its individual folder in the Elements folder - ndl-arrows-navbar, ndl-boxes-navbar or ndl-pills-navbar.
Next decide which colour version of the Element to edit. The grey version will be the default version used on a form, if you don't change the Colour Theme property for the Element. Arrows Navbars have Blue, Green and Grey subfolders, whilst Boxes and Pills Navbars have Blue and Grey subfolders.
Note that each image comes in three different versions, e.g. background.png, background-selected.png and background-visited.png. These allow you to provide different colours, if desired, for the current page ('-selected' images), pages earlier in the series ('-visited' images) and pages which are later in the series than the current page (image names with no suffix), e.g.:
- You could potentially also edit the images to change the shapes of the individual components of the Navbar if you wanted to.
You can further enhance your Navbar by adding images, which will be displayed to the left of the page name. This is done within the properties for a page, allowing you to add a different image for each page, if you want to. You can also display different images when a page is the current page and when it's not.
To display the properties for the current page, in the Form Design workspace, click anywhere on the background of the page outside the boundaries of any Elements, or select the page in the Project Explorer's Pages tab. The page properties will be displayed in the Properties Pane. The Selected Image and Unselected Image properties allow you to specify the image(s) to be displayed in the tab or pill for the current page. For the Arrows Navbar, the Selected Image is used for the currently displayed page and all pages before it and the Unselected Image
is used for pages after the current page in the sequence. For the Boxes Navbar, Navbar and Pills Navbar Elements, the Selected Image is used when the page is displayed and the Unselected Image when it isn't.
To browse for an image, click on 
at the right-hand end of the property. A standard file browse dialog will be displayed allowing you to locate and select the required picture. If you want to re-use a picture that you have already used in this project, click on the down arrow symbol at the end of the edit box instead. This will display a list of images used in the project and you can select the one you want.
If you want to change the picture, simply select the new picture you want to use instead or to clear the selection, click on 
to the right of the button.
The image will automatically be scaled at runtime to fit within the Navbar.
- Any changes you make here will also affect any Tab Controls placed on this page as well.
If you don't want a particular page to appear in your Navbar, you can remove it within the properties for the page.
To display the properties for the current page, in the Form Design workspace, click anywhere on the background of the page outside any Elements, or select the page in the Project Explorer's Pages tab. The page properties will be displayed in the Properties Pane.
The Display in Navbar properties determine whether the page is included in the Navbar. By default, the 
box is selected and the page will be included. To remove the page from the Navbar, select 
Alternatively, you can click on the 
box to enter a JavaScript expression which specifies when the page should be included. The expression will be evaluated at runtime and if it evaluates to true the page will be included in the Navbar; if it evaluates to false, the page will be removed from the Navbar. Clicking on the box will load the Expression Builder pop-up which allows you to type in your expression:
Click on the Save button to save your changes or on Cancel to abandon any changes. The Reset button will clear the current expression and reset this property back to its default value.
- Any changes you make here will also affect any Tab Controls placed on this page as well.
A Navbar allows users to move through the pages making up the form and can be used on its own or in conjunction with other navigational means, such as Next and Previous Button Elements. The properties for each Page include a property, Nonsequential, which allows you to specify whether the user will be able to move to a page even if the pages before it have not been sufficiently completed by the user.
To access this property for the current page, in the Form Design workspace, click anywhere on the background of the page outside any Elements, or select the page in the Project Explorer's Pages tab. The page properties will be displayed in the Properties Pane.
The Nonsequential property allows you to specify whether the user should be able to move to the current page using the Navbar when previous pages in the sequence are invalid, e.g. because a required field hasn't yet been entered. By default, the box is selected and users cannot access the page unless the intervening pages are all valid. To allow users to access the page without checking the validity select the box instead. For example, you could use this feature to supply a help page which users can access at any time, irrespective of their current position within the form.
Alternatively, you can click on the box to enter a JavaScript expression which specifies whether the page should be accessible or not. The expression will be evaluated at runtime and if it evaluates to true the page will be accessible even if other pages are invalid; if it evaluates to false, the page will not be accessible out of sequence. Clicking on the box will load the same Expression Builder pop-up as shown above.
If you add Next, Previous or Go To Page buttons to a page, or express the equivalent within an Event or custom JavaScript, these also abide by the Nonsequential settings on each page.
Once you have placed a Navbar Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane.
The following properties are available:
Visible and Disabled Properties
Brand
Relevant when the Navbar is displayed as a hamburger menu, this property allows you to specify a text string to be displayed at the top of the menu, on a level with the hamburger button.
Colour Theme
Allows you to choose the colour of the Navbar. Arrows Navbars have three colour choices supplied as standard - grey, green and blue, whereas Boxes and Pills Navbars have two - grey and blue.
Styles Category
Brand
Relevant when the Navbar is displayed as a hamburger menu, this property allows you to assign a style to the text specified in the Brand property, under the Appearance tab , and the background colour of the menu's top bar.
Navbar Style
Allows you to assign a style to the parts of the Navbar which are outside the Brand and page name areas. This style is only available with the NAVBAR Navbar.
Collapse Control Style
Allows you to assign a style to the hamburger button displayed when the Navbar is displayed as a hamburger menu. The style uses the background colour property to set the colour of the horizontal bars of the hamburger menu, e.g.:
However, in order for your chosen colour to take effect, you will need to manually edit the CSS file and mark this property as '!important'. To do this:
Right-click on the relevant style in the Styles gallery and choose Edit CSS.
Look for the line:
background:<colour>;
Add !important after the colour and before the semi-colon, e.g. to display the hamburger menu in our example above, the line would read:
background:indianred !important;
You can also use the border colour, border style and border width properties to affect the display of the horizontal bar, but you don't need to use '!important' with these properties. All other properties in this style are ignored by the hamburger menu.
Text Style
Allows you to assign a style to the text displayed in those sections of the Navbar indicating pages which are ahead of the current page, e.g. to set the font type, size and colour. The Property only affects the actual text - the style's background colour is ignored. The property affects the Element in both the standard Navbar and hamburger menu displays. This property is not available with the NAVBAR Navbar.
Link Style
Allows you to assign a style to the page links, the sections of the Navbar which display the page names and on which the user can click to move to the clicked page. This style is only available with the NAVBAR Navbar.